<template>
	<!-- 横向直播设置弹框 -->
	<view class="orientation-modal" v-if="visible" @touchmove.stop.prevent @click="close">

		<view class="modal-container" @click.stop>
			<view class="modal-header">
				<text class="modal-title">横纵切换</text>
				<text class="modal-close" @click="close">×</text>
			</view>

			<view class="orientation-options">
				<view class="option-btn" :class="{ active: !tempOrientation }" @click="setOrientation(false)">
					<text>纵向直播</text>
				</view>
				<view class="option-btn" :class="{ active: tempOrientation }" @click="setOrientation(true)">
					<text>横向直播</text>
				</view>
			</view>

			<view class="preview-area">
				<view class="preview-placeholder" :style="previewStyle"></view>
			</view>

			<view class="orientation-tip">
				<text>{{ orientationTip }}</text>
			</view>

			<view class="modal-footer">
				<button class="confirm-btn" @click="confirm">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			currentOrientation: {
				type: Boolean,
				default: false // false为纵向，true为横向
			}
		},
		data() {
			return {
				tempOrientation: this.currentOrientation
			}
		},
		computed: {
			orientationTip() {
				return this.tempOrientation ?
					'当前画面为横向直播区域展示，观众可切换至横屏观看' :
					'当前画面为纵向直播区域展示，观众不可切换至横屏观看'
			},
			previewStyle() {
				return {
					width: this.tempOrientation ? '90%' : '60%',
					height: this.tempOrientation ? '60%' : '90%',
					backgroundColor: this.tempOrientation ? 'rgb(210, 222, 245)' : 'rgb(210, 222, 245)'
				}
			}
		},
		methods: {
			close() {
				this.$emit('close')
			},
			confirm() {
				this.$emit('confirm', this.tempOrientation)
				this.close()
			},
			setOrientation(isHorizontal) {
				this.tempOrientation = isHorizontal
			}
		}
	}
</script>

<style lang="scss">
	.orientation-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;

		.modal-mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.modal-container {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0 0;
			padding: 30rpx;
			box-sizing: border-box;
			animation: slide-up 0.3s;
		}

		@keyframes slide-up {
			from {
				transform: translateY(100%);
			}

			to {
				transform: translateY(0);
			}
		}

		.modal-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;

			.modal-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}

			.modal-close {
				font-size: 50rpx;
				color: #999;
				line-height: 1;
			}
		}

		.orientation-options {
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.option-btn {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				// border: 1rpx solid #333;
				border-radius: 40rpx;
				margin: 0 15rpx;
				font-size: 28rpx;
				color: #333;
				background-color: rgb(255, 255, 255);

				&.active {
					background-color: rgb(239, 239, 239);
					font-weight: bold;
				}
			}
		}

		.preview-area {
			width: 100%;
			height: 300rpx;
			background-color: #f5f5f5;
			border-radius: 10rpx;
			margin-bottom: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.preview-placeholder {
				border-radius: 8rpx;
				transition: all 0.3s ease;
			}
		}

		.orientation-tip {
			text-align: center;
			font-size: 24rpx;
			color: #999;
			margin-bottom: 40rpx;
		}

		.modal-footer {
			display: flex;
			justify-content: center;

			.confirm-btn {
				width: 80%;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #55aaff;
				color: #fff;
				border-radius: 40rpx;
				font-size: 32rpx;
				border: none;
			}
		}
	}
</style>